<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <!--<script type='module' src="./main.js" ></script>-->
    <script src="./CesiumUnminified/Cesium.js"></script>
    <style>
      @import url(./CesiumUnminified/Widgets/widgets.css);

      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .floating-div {
        position: fixed;
        top: 0;
        left: 0;
        background-color: #333;
        color: #fff;
        padding: 10px;
        z-index: 9999;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>

    <script type="module">
      import createSkyboxImage from "./createSkyboxImage.js";

      // 请使用你自己的Cesium ion access token!!
      // Cesium ion access token.
      Cesium.Ion.defaultAccessToken =
        "your own token";

      //  初始化Cesium Viewer
      const viewer = new Cesium.Viewer("cesiumContainer");

      //  创建天空盒子的6个面的图片
      const width = 8192; //  单个图片的宽度和高度（像素）
      const mx = createSkyboxImage(0, width);
      const my = createSkyboxImage(1, width);
      const px = createSkyboxImage(2, width);
      const py = createSkyboxImage(3, width);
      const pz = createSkyboxImage(4, width);
      const mz = createSkyboxImage(5, width);

      //  更改天空盒（可通过注释切换不同的天空盒）
      viewer.scene.skyBox = new Cesium.SkyBox({
        sources: {
        /*
        positiveX: "./Skybox/starmap_2020_16k/starmap_2020_16k_px.jpg",
        negativeX: "./Skybox/starmap_2020_16k/starmap_2020_16k_mx.jpg",
        positiveY: "./Skybox/starmap_2020_16k/starmap_2020_16k_py.jpg",
        negativeY: "./Skybox/starmap_2020_16k/starmap_2020_16k_my.jpg",
        positiveZ: "./Skybox/starmap_2020_16k/starmap_2020_16k_pz.jpg",
        negativeZ: "./Skybox/starmap_2020_16k/starmap_2020_16k_mz.jpg",
        */
        /*
        positiveX: "./Skybox/SkyCube2k/skyCube2k_px.jpg",
        negativeX: "./Skybox/SkyCube2k/skyCube2k_mx.jpg",
        positiveY: "./Skybox/SkyCube2k/skyCube2k_py.jpg",
        negativeY: "./Skybox/SkyCube2k/skyCube2k_my.jpg",
        positiveZ: "./Skybox/SkyCube2k/skyCube2k_pz.jpg",
        negativeZ: "./Skybox/SkyCube2k/skyCube2k_mz.jpg",
        */

          positiveX: px,
          negativeX: mx,
          positiveY: py,
          negativeY: my,
          positiveZ: pz,
          negativeZ: mz,
        },
      });

      // 下载天空盒图片(6张)(通过网页下载，下载的图片在浏览器的下载目录里）
      const names = ["mx", "my", "px", "py", "pz", "mz"];
      const hrefs = [mx, my, px, py, pz, mz];
      for (let i = 0; i < 6; i++) {
        // 创建下载链接
        const link = document.createElement("a");
        link.download = "hippa2_" + width + "_" + names[i] + `.png`;
        link.href = hrefs[i];

        // 模拟点击下载链接
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }

      // 显示帧率
      viewer.scene.debugShowFramesPerSecond = true;
    </script>
  </body>
</html>
